<template>
  <div class="chart-container">
    <dv-border-box1>
      <div ref="chartRef" class="rice-cost-chart"></div>
    </dv-border-box1>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
  import * as echarts from 'echarts'

  const chartRef = ref<HTMLDivElement | null>(null)
  let chartInstance: echarts.ECharts | null = null
  const nowClientWidth = ref(document.documentElement.clientWidth)

  function nowSize(val: number, initWidth = 1920) {
    return val * (nowClientWidth.value / initWidth)
  }

  const option = computed(() => ({
    title: {
      text: '米成本',
      top: nowSize(10),
      left: nowSize(20),
      textStyle: {
        fontSize: nowSize(16),
        fontWeight: 'bold',
      },
    },
    tooltip: { trigger: 'axis' },
    legend: {
      data: ['探井', '开发井', '调整井', '整体'],
      top: nowSize(10),
      right: nowSize(10),
      textStyle: { color: '#1e90ff', fontSize: nowSize(14) },
    },
    grid: {
      left: nowSize(40),
      right: nowSize(30),
      top: nowSize(50),
      bottom: nowSize(40),
    },
    xAxis: {
      type: 'category',
      data: ['2022', '2023', '2024', '2025'],
      axisLine: { lineStyle: { color: '#1e90ff' } },
      axisLabel: { color: '#333', fontSize: nowSize(14) },
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 6,
      splitLine: { lineStyle: { color: '#e0e0e0' } },
      axisLabel: { color: '#333', fontSize: nowSize(14) },
    },
    series: [
      {
        name: '探井',
        type: 'line',
        data: [1.44, 1.68, 1.29, 1.1],
        color: '#00cfff',
        symbol: 'circle',
        symbolSize: nowSize(8),
        lineStyle: { width: nowSize(2) },
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          backgroundColor: '#00cfff',
          borderRadius: nowSize(4),
          padding: [nowSize(2), nowSize(6)],
          fontWeight: 'bold',
          formatter: (params: any) => params.value,
        },
        areaStyle: {
          color: 'rgba(0, 207, 255, 0.15)',
        },
      },
      {
        name: '开发井',
        type: 'line',
        data: [2.44, 1.68, 1.29, 3.1],
        color: '#1e90ff',
        symbol: 'circle',
        symbolSize: nowSize(8),
        lineStyle: { width: nowSize(2) },
        areaStyle: {
          color: 'rgba(30, 144, 255, 0.10)',
        },
      },
      {
        name: '调整井',
        type: 'line',
        data: [1.44, 1.68, 1.59, 3.1],
        color: '#7ee5e5',
        symbol: 'circle',
        symbolSize: nowSize(8),
        lineStyle: { width: nowSize(2) },
        areaStyle: {
          color: 'rgba(126, 229, 229, 0.10)',
        },
      },
      {
        name: '整体',
        type: 'line',
        data: [1.44, 1.68, 1.39, 2.1],
        color: '#2be39c',
        symbol: 'circle',
        symbolSize: nowSize(8),
        lineStyle: { width: nowSize(2) },
        areaStyle: {
          color: 'rgba(43, 227, 156, 0.10)',
        },
      },
    ],
  }))

  function resizeChart() {
    if (chartInstance) {
      nowClientWidth.value = document.documentElement.clientWidth
      chartInstance.setOption(option.value)
      chartInstance.resize()
    }
  }

  onMounted(() => {
    if (chartRef.value) {
      chartInstance = echarts.init(chartRef.value)
      chartInstance.setOption(option.value)
      window.addEventListener('resize', resizeChart)
    }
  })

  onBeforeUnmount(() => {
    if (chartInstance) {
      chartInstance.dispose()
      chartInstance = null
    }
    window.removeEventListener('resize', resizeChart)
  })
</script>

<style scoped lang="scss">
  .chart-container {
    width: 100%;
    height: 100%;
  }

  .rice-cost-chart {
    width: 100%;
    height: 320px;
    min-width: 300px;
    min-height: 200px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(30, 144, 255, 0.08);
  }
</style>
